<!-- Dom模板 -->
<template>
  <div class="cover">
    <!-- Dom内容 -->
    <div class="alert">
        <div class="top">
          <p class="title">添加角色</p>
        </div>
        <div class="con">
          <p><span>角色名称：</span><input type="text" placeholder="请输入名称" v-model="roleVal"></p>
          <p><span>所属组织：</span><input type="text" placeholder="请输入组织" v-model="organizationVal"></p>
          <p>
            <span>状态：</span>
            <select ref="state">
              <option value="请选择">请选择</option>
              <option v-for="item in options" :key="item.value" :value="item.label">
                {{ item.label }}
              </option>
            </select>
          </p>
          <p>
            <span>权限：</span>
            <select ref="jurisdiction">
              <option value="请选择">请选择</option>
              <option v-for="item in options2" :key="item.value" :value="item.label">
                {{ item.label }}
              </option>
            </select>
          </p>
        </div>
        <div class="bottom">
          <button class="ok" @click="okBtn({
            name:$refs.jurisdiction.value,
            organization:organizationVal,
            creator:roleVal,
            createTime:new Date().toLocaleDateString(),
            state:$refs.state.value==='启用'?1:0,
        })">确认</button>
          <button class="cancel" @click="setAlert(false)">取消</button>
        </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import {mapMutations,mapState,mapActions} from "vuex"

export default {
  name: '',
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "启用",
        },
        {
          value: "选项2",
          label: "停用",
        },
      ],
      options2: [
        {
          value: "选项1",
          label: "banner管理",
        },
        {
          value: "选项2",
          label: "管理员管理",
        },
        {
          value: "选项3",
          label: "用户管理",
        },
        {
          value: "选项4",
          label: "角色管理",
        },
        {
          value: "选项5",
          label: "系统管理",
        },
        {
          value: "选项6",
          label: "信息填报管理",
        },
      ],
      // 角色名称
      roleVal:"",
      // 所属组织
      organizationVal:"",
    }
  },
  computed:{
    ...mapState({
      roleAdministratorState:'roleAdministrator'
    })
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
      
  },
  // Vue方法定义
  methods: {
      ...mapMutations({
        setAlert:'roleAdministrator/setAlert',
      }),
      ...mapActions({
        addData:'roleAdministrator/addData',
        getData:'roleAdministrator/getData'
      }),


      okBtn(res){
        // 调用添加异步函数
        this.addData(res)  
        
        // 关闭弹框
        this.setAlert(false)

        this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
      }
  }
}
</script>

<style scoped>
/* @import url(''); 引入css类 */
.cover{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    right:0;
    background:rgba(0,0,0,.3)
}
.alert{
    width:700px;
    max-height:500px;
    background:#fff;
    position:fixed;
    left:50%;
    top:50%;
    margin-top:-250px;
    margin-left:-350px;
}
/* top */
.alert .top{
  width:100%;
  height:50px;
  display:flex;
  align-items: center;
  justify-content: space-around;
}
/* con */
.alert .con{
  margin:0 200px;
}
.alert .con p{
  height:50px;
  display:flex;
  align-items: center;
}
.alert .con p span{
  display: inline-block;
  width:100px;
  text-align: left;
}
.alert .con p input,.alert .con p select{
  width:200px;
  height:30px;
}
/* bottom */
.alert .bottom{
  margin:0 250px;
  padding-top:100px;
  padding-bottom:40px;
}
.alert .bottom button{
  width:80px;
  height:30px;
  margin-right:10px;
  border:none;
  outline: none;
  border-radius: 2px;
}
.alert .bottom button.ok{
  background:#3894FF;
  color:#fff;
}
.alert .bottom button.cancel{
  border:1px solid #767673;
  color:#767673;
  background:#FFFCFC;
}
</style>